import React, { memo } from "react";
import type { FC, ReactNode } from "react";
import { CloudStoragePageWrapper } from "./style";
import { useAppSelector } from "@/store";
import AreaItemv4 from "@/components/area-itemv4";
import { shallowEqual } from "react-redux";

interface IProps {
  children?: ReactNode;
}

const CloudStoragePage: FC<IProps> = () => {
  const { userCloudList } = useAppSelector((state) => ({
    userCloudList: state.musicLibrary.userCloudList
  }), shallowEqual)
  return <CloudStoragePageWrapper>
    {userCloudList.length > 0 &&
      userCloudList.map((item, index) => (
        <AreaItemv4 key={item.songId} itemData={item} index={index} />
      ))}
  </CloudStoragePageWrapper>;
};

export default memo(CloudStoragePage);